<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
		<style type="text/css">
			.heima,
			.flip {
				text-align: center;
				background: pink;
				border: 1px solid black;
				margin: 0;
			}
			
			.heima {
				display: none;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<input type="button" name="" id="" value="停止动画" />
		<div class="heima">
			<p>黑马程序员</p>
		</div>
		<p class="flip">点击我</p>
	</body>
	<script type="text/javascript">
		$('.flip').click(function() {
            $('.heima').slideDown(5000)
		})
		$('input').click(function(){
			// 当我点击按钮的时候，停止动画效果
			$('.heima').stop()
		})
	</script>

</html>